<!DOCTYPE html>

<html>

<!--HEAD -->
<head>

  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=EDGE" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />

  <title>Stata Visual Library</title>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
    integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
    crossorigin="anonymous">
  </script>

  <link rel="stylesheet"
    href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
    integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z"
    crossorigin="anonymous">

  <link rel="stylesheet" href="site_libs/bootstrap-3.3.5/css/cerulean.min.css">
  <link rel="stylesheet" href="site_libs/custom-css.css">

  <script
    src="https://code.jquery.com/jquery-3.5.1.min.js"
    integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
    crossorigin="anonymous"
    onload="loaded=true; console.log(loaded)">
  </script>

  <script type="text/javascript">
    jQuery(document).ready(function(){
        jQuery("#contain").load("https://raw.githubusercontent.com/worldbank/stata-visual-library/master/docs/header.html");
    });
  </script>

  <script type="text/javascript">
    $(function () {
      $('[data-toggle="tooltip"]').tooltip()
    })
  </script>

  <script type="text/javascript">
  if (window.hljs) {
    hljs.configure({languages: []});
    hljs.initHighlightingOnLoad();
    if (document.readyState && document.readyState ==="complete") {
      window.setTimeout(function() { hljs.initHighlighting(); }, 0);
    }
  }
  </script>

</head>

<!-- BODY -->
<body>

  <!-- Upper row -->
  <div id="contain"></div>

  <!-- Content -->
  <div class="container-fluid main-container">
  <div class="card-columns">
    <script type="text/javascript">

      var plots = ["boxplot-pctile"];

       for(var i = 0; i < plots.length; i++) {
         document.write('<div class="col-sm-12">');
         document.write('<div class="card" data-toggle="tooltip" data-placement="bottom" title="Click on image to see the code">');
         document.write('<a href="' + plots[i] + '.html"class="stretched-link"></a>');
         document.write('<div class="card-body">');
         document.write('<img class="card-img"src="figure/' + plots[i] +'.png">');
         document.write('</div></div></div>');
       }
    </script>
  </div>
  </div>
<!-- dynamically load mathjax for compatibility with self-contained -->
<script
  src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"
  integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN"
  crossorigin="anonymous">
</script>
<script
  src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"
  integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV"
  crossorigin="anonymous">
</script>

</body>
</html>
